/**
* 列表组件
*/
<template>
  <div>
    <!-- :height="tableHeight ? tableHeight : 600"
      :max-height="tableHeight ? tableHeight : 600" -->
    <el-table ref="multipleTable" :data="data" tooltip-effect="dark" highlight-current-row
      @cell-mouse-enter="handleInLine" @current-change="handleCurrentLine"
      style="width: 100%;background-color: rgba(0, 0, 0, 0);color: #606060;" :height="tableHeight ? tableHeight : 600"
      :max-height="tableHeight ? tableHeight : 600" @selection-change="handleSelectionChange" @row-click="handdle"
      class="cur">
      <div v-for="(item, index) in config.columns" :key="index">
        <div v-if="item.class == 'select'">
          <el-table-column type="selection" :width="item.width" />
        </div>
        <div v-if="item.class == 'prop'">
          <el-table-column :prop="item.field" :label="item.title" :width="item.width" sortable />
        </div>
        <div v-if="item.class == 'text'">
          <el-table-column :prop="item.field" :label="item.title" :width="item.width" :show-overflow-tooltip="!item.showTooltip" />
        </div>
        <div v-if="item.class == 'index'">
          <el-table-column type="index" :width="item.width" label="序号" />
        </div>
        <div v-if="item.class == 'btn'">
          <el-table-column :fixed="item.fixed" :label="item.title" :width="item.width" class-name="operation_columns">
            <template slot-scope="scope">
              <div style="display: flex;" v-if="scope.row.username != 'admin'">
                <div v-for="(obj, ind) in item.oper" :key="ind" >
                  <el-link type="primary"  @click="handleClick(scope.row, obj.key)" :icon="obj.icon" style="margin: 0 8px;">{{ obj.name }}</el-link>
                  <!-- <el-button @click="handleClick(scope.row, obj.key)" type="text" size="small"> {{ obj.name
                  }}&nbsp;&nbsp;&nbsp;</el-button> -->
                </div>
              </div>
            </template>
          </el-table-column>
        </div>
        <div v-if="item.class == 'btnStorage'">
          <el-table-column :fixed="item.fixed" :label="item.title" :width="item.width">
            <template slot-scope="scope">
              <div v-if="scope.row.type_text != '目录'" style="display: flex;">
                <div v-for="(obj, ind) in item.oper" :key="ind">
                  <el-button @click="handleClick(scope.row, obj.key)" type="text" size="small"> {{ obj.name
                  }}&nbsp;&nbsp;&nbsp;</el-button>
                </div>
              </div>
            </template>
          </el-table-column>
        </div>
        <div v-if="item.class == 'btnCheck'">
          <el-table-column :fixed="item.fixed" :label="item.title" :width="item.width" class-name="operation_columns">
            <template slot-scope="scope">
              <div style="display: flex;">
                <!-- {{ scope.row }} -->
                <div v-if="scope.row.status == 2" style="display: flex;">
                  <div v-for="(obj, ind) in item.oper" :key="ind">
                    <el-button @click="handleClick(scope.row, obj.key)" type="text" size="small">
                      <div v-if="obj.name == '预览'" style="color: black;font-weight: 900;"> {{ obj.name
                      }}&nbsp;&nbsp;&nbsp;</div>
                      <div v-if="obj.name == '审核'" style="color: grey;font-weight: 900;"> {{ obj.name }}&nbsp;&nbsp;&nbsp;
                      </div>
                    </el-button>
                  </div>
                </div>
                <div v-if="scope.row.status != 2" style="display: flex;">
                  <div v-for="(obj, ind) in item.oper" :key="ind">
                    <el-button @click="handleClick(scope.row, obj.key)" type="text" size="small">
                      <div style="color: black;font-weight: 900;">
                        {{ obj.name }}&nbsp;&nbsp;&nbsp;
                      </div>
                    </el-button>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </div>
        <div v-if="item.class == 'img'">
          <el-table-column :prop="item.field" :label="item.title" :width="item.width">
            <template slot-scope="scope">
              <el-image :src="scope.row.logo" :preview-src-list="[scope.row.logo]" style="height: 30px;" />
            </template>
          </el-table-column>
        </div>
        <div v-if="item.class == 'switch'">
          <el-table-column :prop="item.field" :label="item.title" :width="item.width">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.swit" active-color="#13ce66" inactive-color="#ff4949" style="height: 30px;"
                @change="switchchange(scope.row)" active-value="1" inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>
        </div>
        <div v-if="item.class == 'default'">
          <el-table-column :prop="item.field" :label="item.title" :width="item.width">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.def" active-color="#13ce66" inactive-color="#ff4949" style="height: 30px;"
                @change="defaultchange(scope.row)" active-value="1" inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>
        </div>
        <div v-if="item.class == 'actors'">
          <el-table-column :prop="item.field" :label="item.title" :width="item.width">
            <template slot-scope="scope">
              <div style="display: flex;width: 157px;white-space: nowrap;overflow: hidden;">
                <div v-for="obj of scope.row.actor">
                  <el-image v-if="obj.image" :src="obj.image" style="height: 30px;width: 30px;margin: 0 5px;" />
                </div>
              </div>
            </template>
          </el-table-column>
        </div>
        <div v-if="item.class == 'isdir'">
          <el-table-column :prop="item.field" :label="item.title" :width="item.width">
            <template slot-scope="scope">
              <div v-if="scope.row.type_text == '目录'" style="color: #409EFF;font-weight: 900;"> {{ scope.row.file_name }}
              </div>
              <div v-if="scope.row.type_text != '目录'"> {{ scope.row.file_name }} </div>
            </template>
          </el-table-column>
        </div>
        <div v-if="item.class == 'html'">
          <el-table-column :prop="item.field" :label="item.title" :width="item.width" :show-overflow-tooltip="!item.showTooltip">
            <template slot-scope="scope">
              <div v-html="scope.row.contents" :style="{ width: item.width +'px', height: item.height +'px' , overflow: 'hidden' }"></div>
            </template>
          </el-table-column>
        </div>
        <div v-if="item.class == 'input'">
          <el-table-column :prop="item.field" :label="item.title" :width="item.width" :show-overflow-tooltip="!item.showTooltip">
            <template slot-scope="scope">
              <el-input v-model="scope.row.ip"></el-input>
            </template>
          </el-table-column>
        </div>
        <div v-if="item.class == 'input1'">
          <el-table-column :prop="item.field" :label="item.title" :width="item.width" :show-overflow-tooltip="!item.showTooltip">
            <template slot-scope="scope">
              <el-input v-model="scope.row.port"></el-input>
            </template>
          </el-table-column>
        </div>
        <div v-if="item.class == 'progress'">
          <el-table-column :prop="item.field" :label="item.title" :width="item.width">
            <template slot-scope="scope">
              <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.progress"></el-progress>
            </template>
          </el-table-column>
        </div>
      </div>
    </el-table>
    <Pagination v-show="ispage" v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>

<script>
import Pagination from '../../components/Pagination'
export default {
  name: 'BasicTabel',
  props: {
    total: {
      required: true,
      type: Number
    },
    config: {
      type: Object,
      required: true
    },
    data: {
      type: Array,
      required: true
    },
    pageparm: {
      type: Object,
      required: false
    },
    tableHeight: {
      type: Number,
      required: false
    },
    ispage: {
      type: Boolean,
      default: true
    },
  },
  components: {
    Pagination
  },
  data() {
    return {
      tableData: [],
      multipleSelection: []
    };
  },
  methods: {
    defaultchange(val) {
      this.$emit('defaultchange', val)
    },
    switchchange(val) {
      this.$emit('switchchange', val)
    },
    handleClick(val, obj) {
      this.$emit('handleClickOper', val, obj)
    },
    handdle(row, event, column) {
      this.$emit('handdle', row, event, column)
    },
    // 分页插件事件
    callFather(parm) {
      this.$emit('callFather', parm)
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit('selection-change', this.multipleSelection)
    },
    handleCurrentLine(currentRow, oldCurrentRow) {
      // console.log(currentRow, oldCurrentRow)
    },
    handleInLine(row, column, cell, event) {
      // console.log(row, column, cell, event)
    }
  },
  created() {
  }
};
</script>


<style scoped lang="less">
.cur {
  cursor: pointer;
}

/deep/.el-table tr {
  background-color: rgba(0, 0, 0, 0);
}

/deep/.el-table tr:focus {
  background-color: #409EFF !important;
}

/deep/.el-table th.el-table__cell.is-leaf {
  background-color: rgba(0, 0, 0, 0);
  color: #606060;
}


/deep/.el-button--text {
  color: #606060 !important;
}

/deep/.el-button--text :hover {
  color: #409EFF !important;
  font-weight: 900;
}

/deep/ .hover-row , /deep/ .el-table__row:hover{
  color: #409EFF !important;
  // background-color: #409EFF !important;
  // font-weight: 900;
}

/deep/.current-row {
  color: #409EFF !important;
  font-weight: 900;
}

/deep/.el-table__fixed-body-wrapper {
  caret-color: transparent;
}

/deep/.el-table__body,
.el-table__footer,
.el-table__header {
  caret-color: transparent;

}
/deep/.operation_columns, /deep/.operation_columns .cell{
  background-color: white;
}

/deep/.hover-row .operation_columns, /deep/.hover-row .operation_columns .cell{
  background-color: #f5f7fa !important;
}

/deep/.current-row .operation_columns .cell {
  background-color: transparent !important;
}

/deep/.el-table__fixed-body-wrapper .el-table__body {
  padding-bottom: 16px !important; 
}

</style>
